<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Substitution Test</title>
    <script src="../../../../montage.js" data-package="../../../"></script>
    <script type="text/montage-serialization">{
        "owner": {
            "prototype": "spec/ui/substitution-test/substitution-test"
        },

        "substitution1": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution1"}
            }
        },

        "substitution2": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution2"},
                "switchValue": "one"
            }
        },

        "substitution3": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution3"}
            }
        },

        "one3": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "one3"}
            }
        },

        "two3": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "two3"}
            }
        },

        "text1": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "text1"},
                "value": "Rogue Text"
            }
        },

        "substitution4": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution4"}
            }
        },

        "substitution5": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution5"},
                "switchValue": "one"
            }
        },

        "substitution6": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution6"},
                "switchValue": "one"
            }
        },

        "foo1": {
            "prototype": "spec/ui/substitution-test/foo.reel",
            "values": {
                "element": {"#": "foo1"}
            }
        },

        "substitution7": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution7"},
                "switchValue": "one"
            }
        },

        "foo2": {
            "prototype": "spec/ui/substitution-test/foo.reel",
            "values": {
                "element": {"#": "foo2"}
            }
        }
    }</script>
</head>
<body>
    <div data-montage-id="substitution1">
        <div data-arg="one">
            <h1 class="title1">Title 1</h1>
        </div>
        <div data-arg="two">
            <h1 class="title2">Title 2</h1>
        </div>
    </div>

    <div data-montage-id="substitution2">
        <div data-arg="one">
            <h1 class="title1">Title 1</h1>
        </div>
        <div data-arg="two">
            <h1 class="title2">Title 2</h1>
        </div>
    </div>

    <div data-montage-id="substitution3">
        <div data-arg="one" data-montage-id="one3" class="one"></div>
        <div data-arg="two" data-montage-id="two3" class="two"></div>
    </div>

    <span data-montage-id="text1"></span>
    <div data-montage-id="substitution4">
    </div>

    <div data-montage-id="substitution5">
        <div data-arg="one" class="one"></div>
        <div data-arg="two" class="two"></div>
    </div>

    <div data-montage-id="substitution6">
        <div data-arg="one" data-montage-id="foo1"></div>
        <div data-arg="two" class="two"></div>
    </div>

    <div data-montage-id="substitution7">
        <div data-arg="one" data-montage-id="foo2"></div>
        <div data-arg="two"></div>
    </div>
</body>
</html>
